<!-- 商品分享 -->
<template>
    <view class="page bgf8" :style="{'--color':color}">
        <status-bar title='商品分享' :goHome='fromShare'></status-bar>
        <view class="d-flex p-top20" :style="{height: scrollH + 'px'}">
            <!-- 左侧菜单 -->
            <scroll-view scroll-y class="left height">
                <view class="item ellipsis" :class="{'active': leftIndex == index}" v-for="(item,index) in pageData" :key="index"
                    @click="tabClick(index)">
                    {{ item.classify_name }}
                </view>
            </scroll-view>
            <!-- 右侧商品 -->
            <scroll-view scroll-y class="right flex-1 height p-left10 p-right20" :scroll-top="scrollTop" @scroll="rightScroll">
                <view class="item bgwhite padding20 m-bot20" :id="`right${index}`" v-for="(item,index) in pageData" :key="index">
                    <view class="size30 color_33 bold">{{ item.classify_name }}</view>
                    <view class="m-top30" v-if="item.goods">
                        <view class="d-flex m-bot30" v-for="(itm,idx) in item.goods" :key="idx" @click="toGoods(itm.goods_id)">
                            <image :src="$imgUrls(itm.img)" mode="aspectFill" class="img"></image>
                            <view class="flex-1 p-left20 p-top10 p-bot10 d-flex f-column j-sb">
                                <view>
                                    <view class="size28 color_33 ellipsis">{{ itm.name }}</view>
                                    <view class="h7 color_99 ellipsis m-top10">{{ itm.info }}</view>
                                </view>
                                <view class="d-flex j-sb a-center">
                                    <view class="size28 color_FOD bold">￥{{ itm.price }}</view>
                                    <view class="p-re" @click.stop="shareItem = itm">
                                        <text class="iconfont icon-fenxiang size32 color_99 bold"></text>
                                        <!-- 点击share分享按钮时会触发onShareAppMessage -->
                                        <button open-type="share" class="btn-contact"></button>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            fromShare: 0,
            pageData: [],
            leftIndex: 0,
            scrollH: 0, // 滚动区域高度
            scrollTop: 0, // 竖向滚动条位置
            shareItem: {}
        }
    },
    computed: {
        ...mapState(['color','System','totalHeight','vid'])
    },
    onLoad(){
        this.scrollH = this.System.screenHeight - this.System.safeAreaInsets.bottom - this.totalHeight
        this.getCate()
    },
    methods: {
        getCate(){
            this.$showLoading('')
            this.$http.get({
                url: '/singleSaleApi/allUpList',
                data: {
                    show_goods: 1
                }
            }).then(res=>{
                if(res.errcode != 100) return this.$Toast(res.msg)
                this.pageData = res.data || []
                setTimeout(()=>{
                    let oneTop = 0
                    this.pageData.forEach((item,index)=>{
                        this.$getViewInfo(`#right${index}`).then(data=>{
                            if(!data) return
                            if(data.id == 'right0') oneTop = data.top
                            item.top = data.top - oneTop
                        })
                    })
                    this.$hideLoading()
                },1000)
            })
        },
        tabClick(index){
            this.leftIndex = index
            this.scrollTop = this.pageData[index].top
        },
        rightScroll(e){
            this.pageData.forEach((item,index)=>{
                if(e.detail.scrollTop >= item.top){
                    this.leftIndex = index
                }
            })
        },
        onShareAppMessage(){
            return {
                title: this.shareItem.name,
                desc: this.shareItem.info,
                path: `/pages/index/index?share_v_id=${this.vid}&pageType=10&gid=${this.shareItem.goods_id}&w=2&pid=${this.vid}`,
                imageUrl: this.$imgUrls(this.shareItem.img)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.left {
    width: 150rpx;
    .item {
        width: 100%;
        line-height: 70rpx;
        font-size: 26rpx;
        color: #666;
        padding-left: 20rpx; 
        margin-top: 10rpx;
        &.active {
            background: #e5e5e5;
            border-radius: 0 35rpx 35rpx 0;
            color: #333;
            font-weight: bold;
            position: relative;
            &::after {
                content: '';
                width: 26rpx;
                height: 26rpx;
                border-radius: 50%;
                background: var(--color);
                position: absolute;
                left: -18rpx;
                top: 50%;
                margin-top: -13rpx;
            }
        }
    }
}
.right {
    .item {
        border-radius: 20rpx 20rpx 0 0;
        .img {
            width: 150rpx;
            height: 150rpx;
        }
    }
}
</style>